// 背景图片
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

// 让当前元素充满整个屏幕
wrapper()
  overflow: auto;
  font-family: PingFang-SC-Medium;
  background-color: $main-bg-color;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
page()
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
// header顶部浮动
fixedTop()
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;

// 0.5px的底部边框,最后一行全部
border1pxBottom($color)
  &:after
    content: '';
    position: absolute;
    bottom: 0;
    background: $color;
    width: 100%;
    height: 1px;
    margin-left: 15px;
    left: 0;
    -webkit-transform: scaleY(0.75);
    transform: scaleY(0.75);
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  &:last-child
    height: 0px;

border1pxBottomLine($color)
  &:after
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    background: $color;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.75);
    transform: scaleY(0.75);
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  &:last-child
    height: 0px;

border1pxTopLine($color)
  &:after
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    background: $color;
    width: 95%;
    height: 1px;
    -webkit-transform: scaleY(0.75);
    transform: scaleY(0.75);
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  &:last-child
    height: 0px;

// 0.5px的底部边框
border1pxBottom2($color)
  &:after
    content: '';
    position: absolute;
    bottom: 0;
    background: $color;
    width: 100%;
    height: 1px;
    margin-left: 15px;
    left: 0;
    -webkit-transform: scaleY(0.75);
    transform: scaleY(0.75);
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
border1pxBottom2Last($color)
  &:after
    height: 0px;
// 不换行
no-wrap()
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap

// 扩展点击区域
extend-click()
  position: relative
  &:before
    content: ''
    position: absolute
    top: -10px
    left: -10px
    right: -10px
    bottom: -10px
